<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>信息管理系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link href="/style/basic_layout.css" rel="stylesheet" type="text/css">
    <link href="/style/common_style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="/js/plugins/jQueryForm/jQueryForm.js"></script>
    <script type="text/javascript" src="/js/plugins/artDialog/jquery.artDialog.js?skin=blue"></script>
    <script type="text/javascript" src="/js/plugins/My97DatePicker/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="/js/plugins/artDialog/iframeTools.js"></script>
    <script type="text/javascript" src="/js/commonAll.js"></script>
    <script>
        $(function () {
            //修改表单的提交方式,就是把表单的提交方式修改为ajax
            $("#editForm").ajaxForm(function (data) {
                //显示那个温馨提示框
                showDialog("操作成功", function () {
                    location.href = "/orderBill/list.do";
                });
            });

            $(".Wdate").click(function () {
                WdatePicker({
                    maxDate: new Date(),
                    readOnly: true
                });

            });

            $(".but_submit").click(function () {

                $.each($("#edit_table_body tr"),function (index,ele) {
                    $(ele).find("[tag='pid']").prop("name","items["+[index]+"].product.id");
                    $(ele).find("[tag='costPrice']").prop("name","items["+[index]+"].costPrice");
                    $(ele).find("[tag='number']").prop("name","items["+[index]+"].number");
                    $(ele).find("[tag='remark']").prop("name","items["+[index]+"].remark");

                });
                $("#editForm").submit();
            });

            //新增明细
            $(".appendRow").click(function () {
                //先克隆第一行数据(连同事件一起克隆了)
                var tr = $("#edit_table_body tr:first").clone(true);
                //清空里面的数据(注意这里是一行数据,然后清空一行中的每一格数据)
                tr.find("input").val("");
                tr.find("span").html("");
                //最后添加到tbody中
                tr.appendTo("#edit_table_body");
            });

            //统一事件绑定
            $("#edit_table_body").on("click", ".searchproduct", function () {

                var tr = $(this).closest("tr");

                $.dialog.open("/product/productListView.do", {
                    title: '选择商品',
                    width: '90%',
                    height: '90%',
                    left: '50%',
                    top: '50%',
                    lock: true,
                    resize: false,
                    close: function () {
                        //从跨框架中取出数据
                        var son = $.dialog.data("data");
                        //判断son是否有数据
                        if (son) {
                            //删除掉共享的数据
                            $.dialog.removeData("data")
                            //设置元素的内容(回填数据)
                            tr.find("[tag='name']").val(son.name);
                            tr.find("[tag='pid']").val(son.id);
                            tr.find("[tag='brand']").html(son.brandName);
                            tr.find("[tag='costPrice']").val(son.costPrice);
                            tr.find("[tag='number']").val(1);
                            tr.find("[tag='amount']").html((son.costPrice * 1).toFixed(2));
                        }
                    }
                }, false);

            }).on("blur", "input[tag='costPrice'],input[tag='number']", function () {

                //找到当前行
                var tr = $(this).closest("tr");
                //在当前行中找到那两个失去焦点的文本框,获取他们的值
                var price = tr.find("[tag='costPrice']").val() || 0;
                var num = tr.find("[tag='number']").val() || 0;
                var amount = price * num;
                tr.find("[tag='amount']").html(amount.toFixed(2));

            }).on("click", ".removeItem", function () {

                //获取到当前行
                var tr = $(this).closest("tr");
                //判断是否只一行数据,如果是只有一行数据,此时清空里面的数据就好了
                if ($("#edit_table_body tr").size() == 1) {
                    tr.find("input").val("");
                    tr.find("span").html("");
                    return;
                }
                tr.remove();

                /*}).on("click",".appendRow",function () {

                    //先克隆第一行数据(连同事件一起克隆了)
                    var tr = $("#edit_table_body tr:first").clone();
                    //清空里面的数据(注意这里是一行数据,然后清空一行中的每一格数据)
                    tr.find("input").val("");
                    tr.find("span").html("");
                    //最后添加到tbody中
                    tr.appendTo("#edit_table_body");
    */
            });

        });
    </script>
</head>
<body>
<form id="editForm" action="/orderBill/saveOrUpdate.do" method="post">
    <input type="hidden" name="id" value="${entity.id}">
    <div id="container">
        <div id="nav_links">
            <span style="color: #1A5CC6;">订单编辑</span>
            <div id="page_close">
                <a>
                    <img src="/images/common/page_close.png" width="20" height="20" style="vertical-align: text-top;"/>
                </a>
            </div>
        </div>
        <div class="ui_content">
            <table cellspacing="0" cellpadding="0" width="100%" align="left" border="0">
                <tr>
                    <td class="ui_text_rt" width="140">采购单编码</td>
                    <td class="ui_text_lt">
                        <input name="sn" value="${entity.sn}" class="ui_input_txt02"/>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">供应商</td>
                    <td class="ui_text_lt">
                        <select id="supplier" name="supplier.id" class="ui_select03">
                            <c:forEach items="${suppliers}" var="supplier">
                                <option value="${supplier.id}">${supplier.name}</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr>
                <script>
                    $("#supplier option[value='${supplier.id}']").prop("selected", true);
                </script>
                <tr>
                    <td class="ui_text_rt" width="140">业务时间</td>
                    <td class="ui_text_lt">
                        <fmt:formatDate value="${entity.vdate}" var="vdate"/>
                        <input name="vdate" value="${vdate}" class="ui_input_txt02 Wdate"/>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">明细</td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="添加明细" class="ui_input_btn01 appendRow"/>
                        <table class="edit_table" cellspacing="0" cellpadding="0" border="0">
                            <thead>
                            <tr>
                                <th width="10"></th>
                                <th width="170">货品</th>
                                <th width="100">品牌</th>
                                <th width="80">价格</th>
                                <th width="80">数量</th>
                                <th width="100">金额小计</th>
                                <th width="180">备注</th>
                                <th width="120"></th>
                            </tr>
                            </thead>
                            <tbody id="edit_table_body">

                            <%--这里需要判断是更新还是新增做,根据不同的操作给不同的界面--%>
                            <c:choose>
                                <%--这个表示的是添加操作的界面(主要是针对不用回显的效果)--%>
                                <c:when test="${empty entity.id}">
                                    <tr>
                                        <td></td>
                                        <td>
                                            <input disabled readonly class="ui_input_txt01" tag="name"/>
                                            <img src="/images/common/search.png" class="searchproduct"/>
                                            <input type="hidden" name="items[0].product.id" tag="pid"/>
                                        </td>
                                        <td><span tag="brand"></span></td>
                                        <td><input type="number" tag="costPrice" name="items[0].costPrice"
                                                   class="ui_input_txt01"/>
                                        </td>
                                        <td><input type="number" tag="number" name="items[0].number" class="ui_input_txt01"/>
                                        </td>
                                        <td><span tag="amount"></span></td>
                                        <td><input tag="remark" name="items[0].remark" class="ui_input_txt01"/></td>
                                        <td>
                                            <a href="javascript:;" class="removeItem">删除明细</a>
                                        </td>
                                    </tr>
                                </c:when>
                            </c:choose>
                            <%--这里表示的是更新操作,因为考虑到使用循环的方法,所有需要两套界面--%>
                            <c:forEach items="${entity.items}" var="item">
                                <tr>
                                    <td></td>
                                    <td>
                                        <input disabled readonly class="ui_input_txt01" tag="name" value="${item.product.name}"/>
                                        <img src="/images/common/search.png" class="searchproduct"/>
                                        <input type="hidden" name="items[0].product.id" tag="pid" value="${item.product.id}"/>
                                    </td>
                                    <td><span tag="brand">${item.product.brandName}</span></td>
                                    <td><input type="number" tag="costPrice" name="items[0].costPrice"
                                               class="ui_input_txt01" value="${item.costPrice}"/>
                                    </td>
                                    <td><input type="number" tag="number" name="items[0].number" value="${item.number}" class="ui_input_txt01"/>
                                    </td>
                                    <td><span tag="amount">${item.amount}</span></td>
                                    <td><input tag="remark" name="items[0].remark" value="${item.remark}" class="ui_input_txt01"/></td>
                                    <td>
                                        <a href="javascript:;" class="removeItem">删除明细</a>
                                    </td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td class="ui_text_lt">
                        &nbsp;<input type="button" value="确定保存" class="ui_input_btn01 but_submit"/>
                        &nbsp;<input id="cancelbutton" type="button" value="重置" class="ui_input_btn01"/>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</form>
</body>
</html>